<template>
  <div>
    <div id="mapView"></div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import { loadModules } from "esri-loader";
let params = reactive({
  houseId: "",
  lat: "35.402536",
  lon: "117.007406",
  dj: "",
  type: "cityzz",
  address: "",
  childList: "",
  parksLayer: {},
  parksLayer2: {},
  id: '',
  datas: [],
});
let createMapView = () => {
  let that = this;
  const option = {
    url: "https://js.arcgis.com/4.18/init.js",
    css: "https://js.arcgis.com/4.18/esri/themes/light/main.css",
  };
  loadModules(
    [
      "esri/Map",
      "esri/views/MapView",
      "esri/config",
      "esri/Graphic",
      "esri/layers/GraphicsLayer",
      "esri/layers/FeatureLayer",
    ],
    option
  ).then(([Map, MapView, esriConfig, Graphic, GraphicsLayer, FeatureLayer]) => {
    esriConfig.apiKey =
      "AAPKdf2979e7d74a47c89d398c8715dc6272d1rJcplaaCYMDoyFMXavlgP41dIAEJ1AtiD_HaH4zbxgkpbazqf9C9E3pveLBGsG";
    //业务代码在此处编写
    const map = new Map({
      basemap: "satellite", //实例化地图
    });
    let view = new MapView({
      //实例化地图视图
      container: "mapview",
      map: map,
      zoom: 18,
      center: ["117.007406", "35.402536"],
    });
    const graphicsLayer = new GraphicsLayer();
    map.add(graphicsLayer);
    const point = {
      // Create a point
      type: "point",
      longitude: params.lon,
      latitude: params.lat,
    };
    const simpleMarkerSymbol = {
      type: "simple-marker",
      color: [226, 119, 40], // Orange
      outline: {
        color: [255, 255, 255], // White
        width: 1,
      },
    };
    const pointGraphic = new Graphic({
      geometry: point,
      symbol: simpleMarkerSymbol,
    });
    graphicsLayer.add(pointGraphic);
    that.queryFeatureLayer(view, view.extent);
    
  });
};
createMapView();
</script>
<style lang="scss" scoped>
#mapView {
  width: 100%;
  height: 90vh;
}
</style>
